{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- 引入核心的css文件 -->
    <link href="{% static "layui/css/layui.css" %}" rel="stylesheet" media="all">
    <!-- 引入核心的js文件-->
    <script src="{% static "layui/layui.js" %}"></script>
    <script src="{% static "js/jquery-3.6.0.min.js" %}"></script>

    <style>

        /* 数据概览 */
        .layui-dvbt1 {
            height: 400px !important;
        / / 提高指定样式规则的应用优先权 !important background-color: #fff;
        }


    </style>
</head>
<body>
{% csrf_token %}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">早上第一次数据</div>
                        <div class="layui-card-body">
                            <div class="layui-dvbt1 " id="EchartXrtbz1">
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">早上第二次数据</div>
                        <div class="layui-card-body">
                            <div class="layui-dvbt1 " id="EchartXrtbz2">
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>


        <div class="layui-col-md6">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">晚上第一次数据</div>
                        <div class="layui-card-body">
                            <div class="layui-dvbt1 " id="EchartXrtbw1">
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>


        <div class="layui-col-md6">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">晚上第二次数据</div>
                        <div class="layui-card-body">
                            <div class="layui-dvbt1 " id="EchartXrtbw2">
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>


    </div>
</div>
</body>
<script type="text/javascript">

    //全局定义一次, echarts  , 引入图表 js
    layui.config({
        base: "{%static '/layui/echarts5.3.3/' %}"  //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        echarts: 'echarts'
    });

    layui.use(["echarts"], function () {
        var echarts = layui.echarts;

        var csrf_token = $("input[name='csrfmiddlewaretoken']").val();
        //console.log(csrf_token)

        /////
        var riqi_list = []  // 需要先 定义 列表 变量 、然后在 通过ajex 赋值
        var data_xr_w_num_z01 = []
        var data_xr_w_num_z02 = []
        var data_no_x_num_z01 = []
        var data_no_x_num_z02 = []
        var data_no_o_num_z01 = []
        var data_no_o_num_z02 = []
        var data_xr_w_num_w01 = []
        var data_xr_w_num_w02 = []
        var data_no_x_num_w01 = []
        var data_no_x_num_w02 = []
        var data_no_o_num_w01 = []
        var data_no_o_num_w02 = []

        $.ajax({
            //几个参数需要注意一下
            type: "post",  //方法类型
            url: "/xrbtdata/",  // 跳转的url
            data: {
                'csrfmiddlewaretoken': csrf_token
            },
            dataType: "json",
            async: false,
            traditional: true,
            success: function (res) {

                riqi_list = res.riqi_temp;
                data_xr_w_num_z01 = res.data_xr_w_num_z01;
                data_xr_w_num_z02 = res.data_xr_w_num_z02;
                data_no_x_num_z01 = res.data_no_x_num_z01;
                data_no_x_num_z02 = res.data_no_x_num_z02;
                data_no_o_num_z01 = res.data_no_o_num_z01;
                data_no_o_num_z02 = res.data_no_o_num_z02;
                data_xr_w_num_w01 = res.data_xr_w_num_w01;
                data_xr_w_num_w02 = res.data_xr_w_num_w02;
                data_no_x_num_w01 = res.data_no_x_num_w01;
                data_no_x_num_w02 = res.data_no_x_num_w02;
                data_no_o_num_w01 = res.data_no_o_num_w01;
                data_no_o_num_w02 = res.data_no_o_num_w02;

            },
        });


        var chartxrtbz1 = echarts.init(document.getElementById('EchartXrtbz1'));
        const labelOptionz1 = {
            show: true,
            position: "insideBottom",
            distance: 19,
            align: 'left',
            verticalAlign: 'middle',
            rotate: 90,
            formatter: '{c}  {name|{a}}',
            fontSize: 18,
            textStyle: {   // 修改字体颜色，都是这个 参数
                color: 'rgb(9,0,0)'
            },
            rich: {
                name: {}
            }
        };

        var optionChartXrtbz1 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['参加渲染的机器', '不参加渲染同事机器', '没有用户的机器']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar', 'stack']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data: riqi_list  // 日期
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '参加渲染的机器',
                    type: 'bar',
                    barGap: 0,
                    label: labelOptionz1,
                    emphasis: {
                        focus: 'series'
                    },
                    data: data_xr_w_num_z01,
                     barWidth: 23,
                    itemStyle: {  // 修改柱形图颜色
                        normal: {
                            color: '#4ad2ff' ,

                        }
                    }
                },
                {
                    name: '不参加渲染同事机器',
                    type: 'bar',
                    label: labelOptionz1,
                     barWidth: 23,
                    emphasis: {
                        focus: 'series'
                    },
                    data: data_no_x_num_z01
                },
                {
                    name: '没有用户的机器',
                    type: 'bar',
                    label: labelOptionz1,
                     barWidth: 23,
                    emphasis: {
                        focus: 'series'
                    },
                    data: data_no_o_num_z01
                },
            ]
        };
        chartxrtbz1.setOption(optionChartXrtbz1, true);


        //////
        var chartxrtbz2 = echarts.init(document.getElementById('EchartXrtbz2'));
        const labelOptionz2 = {
            show: true,
            position: "insideBottom",
            distance: 19,
            align: 'left',
            verticalAlign: 'middle',
            rotate: 90,
            formatter: '{c}  {name|{a}}',
            fontSize: 18,
            rich: {
                name: {}
            }
        };

        var optionChartXrtbz2 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['参加渲染的机器', '不参加渲染同事机器', '没有用户的机器']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar', 'stack']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data: riqi_list  // 日期
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '参加渲染的机器',
                    type: 'bar',
                    barGap: 0,
                     barWidth: 23,
                    label: labelOptionz2,
                    emphasis: {
                        focus: 'series'
                    },
                    data: data_xr_w_num_z02
                },
                {
                    name: '不参加渲染同事机器',
                    type: 'bar',
                    label: labelOptionz2,
                     barWidth: 23,
                    emphasis: {
                        focus: 'series'
                    },
                    data: data_no_x_num_z02
                },
                {
                    name: '没有用户的机器',
                    type: 'bar',
                    label: labelOptionz2,
                     barWidth: 23,
                    emphasis: {
                        focus: 'series'
                    },
                    data: data_no_o_num_z02
                },
            ]
        };
        chartxrtbz2.setOption(optionChartXrtbz2, true);

        /////
        var chartxrtbw2 = echarts.init(document.getElementById('EchartXrtbw2'));
        const labelOptionw2 = {
            show: true,
            position: "insideBottom",
            distance: 19,
            align: 'left',
            verticalAlign: 'middle',
            rotate: 90,
            formatter: '{c}  {name|{a}}',
            fontSize: 18,
            rich: {
                name: {}
            }
        };

        var optionChartXrtbw2 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['参加渲染的机器', '不参加渲染同事机器', '没有用户的机器']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar', 'stack']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data: riqi_list  // 日期
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '参加渲染的机器',
                    type: 'bar',
                    barGap: 0,
                     barWidth: 23,
                    label: labelOptionw2,
                    emphasis: {
                        focus: 'series'
                    },
                    data: data_xr_w_num_w02
                },
                {
                    name: '不参加渲染同事机器',
                    type: 'bar',
                    label: labelOptionw2,
                     barWidth: 23,
                    emphasis: {
                        focus: 'series'
                    },
                    data: data_no_x_num_w02
                },
                {
                    name: '没有用户的机器',
                    type: 'bar',
                    label: labelOptionw2,
                     barWidth: 23,
                    emphasis: {
                        focus: 'series'
                    },
                    data: data_no_o_num_w02
                },
            ]
        };
        chartxrtbw2.setOption(optionChartXrtbw2, true);

        ////
        var chartxrtbw1 = echarts.init(document.getElementById('EchartXrtbw1'));
        const labelOptionw1 = {
            show: true,
            position: "insideBottom",
            distance: 19,
            align: 'left',
            verticalAlign: 'middle',
            rotate: 90,
            formatter: '{c}  {name|{a}}',
            fontSize: 18,
            rich: {
                name: {}
            }
        };

        var optionChartXrtbw1 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['参加渲染的机器', '不参加渲染同事机器', '没有用户的机器']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar', 'stack']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data: riqi_list  // 日期
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '参加渲染的机器',
                    type: 'bar',
                    barGap: 0,
                    label: labelOptionw1,
                     barWidth: 23,
                    emphasis: {
                        focus: 'series'
                    },
                    data: data_xr_w_num_w01
                },
                {
                    name: '不参加渲染同事机器',
                    type: 'bar',
                    label: labelOptionw1,
                     barWidth: 23,
                    emphasis: {
                        focus: 'series'
                    },
                    data: data_no_x_num_w01
                },
                {
                    name: '没有用户的机器',
                    type: 'bar',
                    label: labelOptionw1,
                     barWidth: 23,
                    emphasis: {
                        focus: 'series'
                    },
                    data: data_no_o_num_w01
                },
            ]
        };
        chartxrtbw1.setOption(optionChartXrtbw1, true);

    });
</script>
</html>


